<template>
    <el-empty description="您还未登录" v-if="token == null"></el-empty>
    <el-descriptions title="我的信息" direction="vertical" border style="margin-top: 20px" v-else>
        <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
            <el-image style="width: 100px; height: 100px" :src=image />
        </el-descriptions-item>
        <el-descriptions-item label="用户名">{{ data.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ data.phone }}</el-descriptions-item>
        <el-descriptions-item label="修改我的头像">
            <el-upload class="avatar-uploader" action="http://127.0.0.1:8000/driver_school/update_img/"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                :headers="{ token: token }">
                <el-icon class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
            <el-tag size="small" v-if="is_graduate">已毕业</el-tag>
            <el-tag size="small" v-else>未毕业</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="个性签名">
            {{ }}
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox, ElUpload } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
const token = localStorage.getItem('token')
const is_graduate = ref(false)
const data = ref([])
const imageUrl = ref()
const image = ref("https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png")
function getdata() {
    axios.get("http://127.0.0.1:8000/driver_school/info/", { headers: { "token": token } })
        .then(res => {
            console.log(res)
            data.value = res.data.data
            image.value = res.data.data.image
            is_graduate.value = res.data.data.is_graduate
        })
        .catch(err => {
            console.error(err);
        })
}
const handleAvatarSuccess = (response, uploadFile) => {
    console.log(response);
    if (response.status == 200) {
        ElMessage({
            message: response.message,
            type: 'success',
        })
        getdata()
    }

    imageUrl.value = URL.createObjectURL(uploadFile.raw);
};
const beforeAvatarUpload = (rawFile) => {
    const isJPG = rawFile.type === 'image/jpeg';
    if (!isJPG) {
        ElMessage.error('请选择JPG格式!');
    }
    const isLt2M = rawFile.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        ElMessage.error('图片大小不能超过2MB!');
    }
    return isJPG && isLt2M;
};
onMounted(() => {
    // Your code here
    getdata()
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>